<template>
    <view class="page">
        <view class="screen-nav">
            <view class="screen-nav-item">
                <picker class="nav-item-picker" mode="selector" :value="industryItem" :range="industry" @change="industryChange">
                    <text>{{industry[industryItem].length>4?industry[industryItem][0]+industry[industryItem][1]+industry[industryItem][2]+industry[industryItem][3]+'...':industry[industryItem]}}</text>
                    <img :src="File_Url+'bottom-grey.png'" />
                </picker>
            </view>
            <!--<view class="screen-nav-item">
                <picker class="nav-item-picker" mode="region" :value="region" :custom-item="customItem" @change="regionChange">
                    <text>{{(region[2]==''?(region[1]==''?(region[0]==''?'地区':region[0]):region[1]):region[2])}}</text>
                    <img :src="File_Url+'bottom-grey.png'" />
                </picker>
            </view>-->
            <view class="screen-nav-item">
                <picker class="nav-item-picker" mode="selector" :value="hotItem" :range="hot" @change="hotChange">
                    <text>{{hotItem==''?'全部':hot[hotItem]}}</text>
                    <img :src="File_Url+'bottom-grey.png'" />
                </picker>
            </view>
        </view>
        <view class="needs-list">
            <view class="needs-item" v-for="(item, index) in needsList" :key="index" @click="skipNeedsDetail(item.id)">
                <view class="needs-item-top">
                    <text class="item-title">{{item.title}}</text>
                    <view class="item-city">
                        <text>{{item.city}}</text>
                        <img mode="widthFix" src="../../static/img/position.png" />
                    </view>
                    <!--<text :class="{'item-status':true,'blue':item.status==0,'green':item.status==1}">
                        {{item.status==0?'筛选中':'对接成功'}}
                    </text>-->
                </view>
                <!--<view class="needs-item-bottom">
                    <view class="item-btn-item item-btn-item-spec">
                        <img class="spec-img" src="../../static/img/needs-type.png" />
                        <text class="spec-text">{{item.classify_name}}</text>
                    </view>
                </view>-->
                <view v-if="item.budget" class="needs-item-bottom" style="margin-top: 15px;">
                    <text style="color: #333333;font-size: 26rpx">服务预算：{{item.budget}}</text>
                </view>
                <view class="needs-item-center">
                    <view class="item-content-text">{{item.content}}</view>
                    <view class="item-content-tip" v-if="item.label_arr.length>0">
                        <view v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</view>
                    </view>
                    <view class="item-content-img" v-if="item.img_array_url.length>0">
                        <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url" mode="aspectFill">
                    </view>
                </view>
                <view class="needs-item-bottom">
                    <view class="item-btn-item">
                        <img :src="File_Url+'eyes-icon.png'"/>
                        <text>{{item.browse_num}}</text>
                    </view>
                    <view class="item-btn-item">
                        <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                        <img :src="File_Url+'collect.png'" v-else/>
                        <text>{{item.attention_num}}</text>
                    </view>
                    <view class="item-time">{{item.created_at.split(' ')[0]}}</view>
                </view>
            </view>
        </view>
        <view class="null" v-if="total == needsList.length">
            <text>没有更多了哦～</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "needsClass",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                industryList: [],
                industry:['全部'],
                industryItem:0,
                region: ['','',''],
                customItem: '全部',
                hot: ['最新','热门'],
                hotItem: 1,
                needsList: [],
                page: 1,
                total: 0,
                classify_id:'',
            }
        },
        onLoad(query){
            this.classify_id = query.classify_id;
            this.classify_name = query.classify_name;
            uni.setNavigationBarTitle({
                title: this.classify_name
            })
        },
        onShow(){
            this.getIndustryList();
        },
        //下拉刷新
        onPullDownRefresh(){
            this.page = 1;
            this.getIndustryList();
            setTimeout(function () {
                uni.stopPullDownRefresh();
            },2000)
        },
        //触底叠加
        onReachBottom(){
            if (this.total != this.needsList.length){
                this.page++;
                this.getIndustryList();
            }

        },
        methods:{
            //获取行业列表
            async getIndustryList(){
                const res = await this.$api.getIndustryList();
                if (res.data.level == 'success'){
                    this.industryList = res.data.data
                    for (let i = 0; i< res.data.data.length ; i++){
                        this.industry.push(res.data.data[i].name);
                    }
                    let num = this.page;
                    for (let i = 0; i< num; i++){
                        this.page = i+1;
                        this.getDemandList();
                    }
                }
            },
            //获取需求列表
            async getDemandList(){
                let params = {
                    page: this.page,
                    limit: 10,
                    province: this.region[0],
                    city: this.region[1],
                    area: this.region[2],
                    is_hot: this.hotItem,
                    classify_id: this.classify_id,
                    user_token: uni.getStorageSync('userToken')
                }
                if (this.industryItem!=0){
                    params.industry_id = this.industryList[this.industryItem-1].id;
                }
                const res = await this.$api.getDemandList(params);
                if (res.data.level == 'success'){
                    if (this.page == 1){
                        this.needsList = res.data.data;
                    }else {
                        this.needsList = this.needsList.concat(res.data.data)
                    }
                    this.total = res.data.page_info.total;
                }
            },
            industryChange(e){
                console.log(e)
                this.industryItem = e.detail.value;
                this.page = 1;
                this.getDemandList();
            },
            regionChange(e){
                console.log(e)
                this.region = e.detail.value;
                this.page = 1;
                if (this.region[0]=='全部') {
                    this.region[0]= '';
                }
                if (this.region[1]=='全部') {
                    this.region[1]= '';
                }
                if (this.region[2]=='全部') {
                    this.region[2]= '';
                }
                this.getDemandList();
            },
            hotChange(e){
                console.log(e)
                this.hotItem = e.detail.value;
                this.page = 1;
                this.getDemandList();
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        padding-top: 90rpx;
    }
    .screen-nav{
        padding: 0 30rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 2rpx #e1e1e1;
        width: calc(100vw - 60rpx);
        position: fixed;
        top: 0;
        left: 0;
        @include flex();
        flex-direction: row;
        .screen-nav-item{
            width: 45%;
            .nav-item-picker{
                padding:24rpx 0;
                @include flex();
                flex-direction: row;
                text{
                    font-size: 28rpx;
                    line-height: 40rpx;
                    height: 40rpx;
                    color: #999999;
                }
                img{
                    width: 30rpx;
                    height: 34rpx;
                    padding: 3rpx;
                    vertical-align: middle;
                }
            }

        }
    }
    .needs-list{
        .needs-item{
            padding: 20rpx 30rpx;
            border-bottom: 10rpx solid #F8F8F8;
            .needs-item-top{
                height: 63rpx;
                @include flex(flex-start);
                flex-direction: row;
                .item-title{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .item-city{
                    display: flex;
                    align-items: center;
                    flex-direction: row-reverse;
                    margin-top: 3px;
                    margin-left: auto;
                    text{
                        min-width: 30px;
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 14px;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
                .item-status{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                }
                .blue{
                    color: #3782FF;
                }
                .green{
                    color: #00C735;
                }
                .red{
                    color: #FF6565;
                }
            }
            .needs-item-center{
                padding: 10rpx 0rpx 16rpx 0;
                .item-content-text{
                    @include ellipsis(3);
                    font-size: 26rpx;
                    line-height: 37rpx;
                    margin-bottom: 16rpx;
                    margin-top: 10rpx;
                }
                .item-content-tip{
                    @include flex(flex-start);
                    flex-direction: row;
                    view{
                        height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        line-height: 40rpx;
                        margin-right: 10rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-img{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding: 20rpx 0;
                    img{
                        width: calc((100% - 36rpx)/3);
                        height: 140rpx;
                        margin: 6rpx;
                        border-radius: 4rpx;
                    }
                    img:last-child{
                        margin-right: 0;
                    }
                }
            }
            .needs-item-bottom{
                @include flex(flex-start);
                flex-direction: row;
                .item-btn-item{
                    @include flex();
                    flex-direction: row;
                    margin-right: 20rpx;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 28rpx;
                        color: #666666;
                    }
                    .spec-img{
                        width: 22rpx;
                        height: 22rpx;
                    }
                    .spec-text{
                        color: #333333;
                        font-size: 11px;
                    }
                }
                .item-btn-item-spec{
                    padding: 4rpx 20rpx;
                    background-color: #f1f1f1;
                    border-radius: 20rpx;
                }
                .item-time{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #666666;
                }
            }
        }
    }
</style>
